
<template>
  <base-page-view class-name="page-container bihs">
    <view class="top">
      <view class="top-bg">
        <b-image width="750" height="430" is-asset src="/static/images/mine/bg_earing_red.png" />
      </view>
      <view class="top-content">
        <view class="js_center price">{{ bihs.validFee | formatMoney }}</view>
        <view class="js_center title">可提现金额</view>
        <view class="js_center" @click="toWithdraw"><view class="button">立即提现</view></view>
      </view>
      <!-- <span class="js_center mention history">干的漂亮！请继续加油~</span> -->
    </view>
    <view v-if="false" class="box">
      <view class="content">
        <view class="c_top">
          <view>
            <view class="totalPrice">{{ bihs.validFee | formatMoney }}</view>
            <view class="text">
              可提现(元)
              <image src="/static/images/commission/question.png" class="question" @click="question(1)" />
            </view>
          </view>
          <view class="btn" @click="toWithdraw">去提现</view>
        </view>
        <view class="c_border"></view>
        <view class="c_bottom">
          <view>
            <view class="price">{{ bihs.totalFee | formatMoney }}</view>
            <view class="text">累计到账(元)
              <image src="/static/images/commission/question.png" class="questions" @click="question(2)" />
            </view>
          </view>
          <view class="b_second">
            <view class="price">{{ bihs.takeFee | formatMoney }}</view>
            <view class="text">已提现(元)</view>
          </view>
          <view class="b_second">
            <view class="price">{{ bihs.notSettleFee | formatMoney }}</view>
            <view class="text">未结算(元)
              <image src="/static/images/commission/question.png" class="questions" @click="question(3)" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="commission-tab">
      <view class="tab-box">
        <view class="tab">
          <view v-for="(tab,index) in tabTit" :key="index" class="tab-item" :class="{active:active===index}" @click="toggle(index)">
            {{ tab }}
            <view v-if="active===index" class="borderBottom">
            </view>
          </view>
        </view>
        <view class="commission-info">
          <view v-if="false" class="generalize">
            <span class="shu"></span>
            我的收益
            <image src="/static/images/mine/question.png" class="questions" @click="question(4)" />
          </view>
          <view class="generalize-num">
            <view>{{ bihsInfo.selfTotalNum+bihsInfo.fansTotalNum }}</view>
            <view class="text">付款笔数</view>
          </view>
          <!-- <view class="b-r"></view> -->
          <view class="generalize-num">
            <view>{{ bihsInfo.selfTotalCommission + bihsInfo.fansTotalCommission | formatMoney }}</view>
            <view class="text">预估收益(元)</view>
          </view>
        </view>
        <!-- <view class="commission-info">
          <view class="generalize">
            <span class="shu shu2"></span>
            团队推广
          </view>
          <view class="generalize-num">
            <view>{{ bihsInfo.fansTotalNum }}</view>
            <view class="text">付款笔数</view>
          </view>
          <view class="b-r"></view>
          <view class="generalize-num">
            <view>{{ bihsInfo.fansTotalCommission | formatMoney }}</view>
            <view class="text">预估收益(元)</view>
          </view>
        </view> -->
      </view>
    </view>
    <view class="bihs_details">
      <view class="details_card" @click="$navigateTo('/pagesCommission/bihs/settleDetails')">
        <view>
          <span class="shu"></span>
          未结算金额(元)
          <image src="/static/images/icon/icon_wh.png" class="questions" @click.stop.prevent="question(3)" />

        </view>
        <view>
          <view class="price">{{ bihs.notSettleFee | formatMoney }}</view>
        </view>
      </view>
      <view class="details_card" @click="$navigateTo('/pagesCommission/bihs/settleDetails')">
        <view>
          <span class="shu"></span>
          收益结算明细
        </view>
        <view>
          <image src="/static/images/commission/list_more.png" class="list_more" />
        </view>
      </view>
      <view class="details_card" @click="$navigateTo('/pagesCommission/bihs/withdrawDetails')">
        <view>
          <span class="shu shu2"></span>
          提现明细
        </view>
        <view>
          <image src="/static/images/commission/list_more.png" class="list_more" />
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
import './index.scss'
import { getTodayDate, getYesterdayDate, getCurrentMonthDate, getLastMonthDate } from '@/utils/tools'
import { inApp } from '@/utils/tools'
export default {
  components: {
  },
  data() {
    return {
      tabTit: ['今日', '昨日', '本月', '上月'],
      active: 0,
      time: [],
      bihs: {},
      bihsInfo: {
        selfTotalCommission: 0,
        selfTotalNum: 0,
        fansTotalCommission: 0,
        fansTotalNum: 0
      }
    }
  },
  created() {
  },
  onLoad(option) {
    this.active = 0
    this.time = getTodayDate()
    this.initData()
    this.getprepareList()
  },
  onShow() {
  },
  methods: {
    toWithdraw() {
      this.getWithdrawType()
    },
    async getWithdrawType() {
      const bihsData = await this.$api.commissionApi.getWithdrawInfo({ userId: this.$store.state.userInfo.uid })
      if (bihsData.code === '000000') {
        const type = bihsData.data.withdrawRule.withdrawChannel
        if (type === 'alipay') {
          this.$navigateTo('/pagesCommission/bihs/withdraw?type=' + type)
        } else {
          if (bihsData.data.userBankCard && Number(bihsData.data.userBankCard.status) === 3) {
            this.$navigateTo('/pagesCommission/bihs/withdraw?type=gongmall')
          } else {
            if (inApp()) {
              this.$gc.$message({
                content: '您还未进行实名认证，请前往个人中心实名认证！',
                title: '提示',
                type: 'richText',
                showMessage: true,
                showCancel: false,
                align: 'center',
                confirmText: '好哒'
              })
            } else {
              this.$gc.$message({
                content: '您还未进行实名认证，只有实名认证的用户才可以发起提现',
                title: '提示',
                type: 'richText',
                showMessage: true,
                showCancel: true,
                confirmText: '去实名',
                align: 'center',
                confirm: () => {
                  uni.removeStorageSync('realName')
                  this.$navigateTo('/pagesMine/certification/index')
                }
              })
            }
          }
        }
      }
    },
    async initData() {
      const bihsData = await this.$api.commissionApi.getBihsCommission({ userId: this.$store.state.userInfo.uid })
      if (bihsData.code === '000000') {
        this.bihs = bihsData.data
      }
    },
    async getprepareList() {
      const res = await this.$api.commissionApi.getPrepareList({
        userId: this.$store.state.userInfo.uid,
        startTime: this.time[0],
        endTime: this.time[1]
      })
      if (res.code === '000000') {
        res.data.forEach(item => {
          if (item.buyerType === 'SELF_BUYING') {
            this.bihsInfo.selfTotalCommission = item.totalCommission
            this.bihsInfo.selfTotalNum = item.totalNum
          } else if (item.buyerType === 'FANS_BUYING') {
            this.bihsInfo.fansTotalCommission = item.totalCommission
            this.bihsInfo.fansTotalNum = item.totalNum
          }
        })
      }
    },
    toggle(index) {
      this.active = index
      if (index === 0) {
        this.time = getTodayDate()
      } else if (index === 1) {
        this.time = getYesterdayDate()
      } else if (index === 2) {
        this.time = getCurrentMonthDate()
      } else if (index === 3) {
        this.time = getLastMonthDate()
      }
      this.getprepareList()
    },
    question(type) {
      let message = ''
      let title = ''
      if (type === 1) {
        message = '指当前已经到账，用户可发起提现的收益金额。'
        title = '可提现'
      } else if (type === 2) {
        message = '指实际到账的收益金额总。'
        title = '累计到账'
      } else if (type === 3) {
        message = '指第三方平台（淘宝联盟、多多进宝、京东联盟、唯品会）待确认结算的商品订单所产生的预估收益。'
        title = '未结算金额'
      } else if (type === 4) {
        message = '指所有购买淘宝联盟、多多进宝商品所产生的收益。'
        title = '我的收益'
      }
      this.$gc.$message({
        content: message,
        title: title,
        type: 'richText',
        showMessage: true,
        showCancel: false,
        confirmText: '好哒',
        align: 'center'
      })
    }
  }
}
</script>
